<template>
  <div>
    <Row>
      <Col span="5">
      <Select v-model="searchData.status" @on-change="onSearchStatusChange" clearable style="width:150px;" placeholder="选择状态">
        <Option value=1>(出售中)上架</Option>
        <Option value=2>(未出售)下架</Option>
      </Select>
      </Col>
      <Col span="5">
      <Cascader :data="searchData.catalogs" :load-data="loadCatalogData" placeholder="选择分类" v-model="searchData.catalogIDs"
        @on-change='onSearchCatalogChange' style="width:150px;" @on-visible-change="onSearchVisibleChange"></Cascader>
      </Col>
      <Col span="8">
      <Input search enter-button v-model="searchData.title" @on-search="onSearchTitleChange" placeholder="商品名称" style="width:300px;"></Input>
      </Col>
    </Row>
    <Divider />
    <Table stripe :columns="table.columns" :data="table.data"></Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page ref="page" :total="pageData.total" :current="pageData.index" :page-size="pageData.size" @on-change="onPageChange"
          show-total></Page>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getCatalogByPid
  } from '../../api/catalog.js'
  import {
    treeToCascader
  } from '../../libs/object.convert.js'
  import {
    formatDate
  } from '../../libs/util.js'
  import {
    getProductsByCondition,
    updateStatus
  } from '../../api/product.js'
  export default {
    data() {
      return {
        //搜索数据
        searchData: {
          status: null,
          catalogIDs: [],
          title: null,
          catalogs: []
        },
        //表格
        table: {
          columns: [
            /* { 隐藏一列，只要不绑定就可以了
                title: '编号',
                key: 'id',
            }, */
            {
              title: '图片',
              key: 'picture',
              render: (h, params) => {
                return h('img', {
                  attrs: {
                    src: params.row.picture
                  },
                  style: {
                    width: '50px',
                    height: '50px'
                  }
                });
              }
            },
            {
              title: '商品名称',
              key: 'title',
              tooltip: true
            },
            {
              title: '价格',
              key: 'price',
              render: (h, params) => {
                return h('div', params.row.price / 100);
              }
            },
            {
              title: '库存',
              key: 'stock'
            },
            {
              title: '创建时间',
              key: 'gmtCreate',
              render: (h, params) => {
                return h('div', formatDate(params.row.gmtCreate, 'yyyy-MM-dd hh:mm:ss'));
              }
            },
            {
              title: '状态',
              key: 'status',
              render: (h, params) => {
                const row = params.row;
                const color = row.status === 1 ? 'green' : 'red';
                const text = row.status === 1 ? '上架' : '下架';
                return h('Tag', {
                  props: {
                    color: color
                  }
                }, text);
              }
            },
            {
              title: '操作',
              key: 'action',
              render: (h, params) => {
                let text = params.row.status === 1 ? '下架' : '上架'
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        let product = {}
                        product.id = params.row.id
                        product.status = params.row.status === 1 ? 2 : 1
                        updateStatus(product).then(res => {
                          if (res.data.status.code == 2000) {
                            for (let i = 0; this.table.data; i++) {
                              if (this.table.data[i].id == product.id) {
                                this.table.data[i].status = product.status
                                break
                              }
                            }
                          }
                        }).catch(err => {
                          console.log(err)
                        })
                      }
                    }
                  }, text),
                  h('Button', {
                    props: {
                      type: 'warning',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        alert('功能暂未实现')
                      }
                    }
                  }, '编辑')
                ]);
              }
            }
          ],
          data: []
        },
        //分页数据
        pageData: {
          index: 1,
          size: 10,
          total: 0
        }
      };
    },
    methods: {
      //搜索框显示下拉事件，异步加载根数据
      onSearchVisibleChange(e) {
        if (e) {
          //异步加载根分类数据
          getCatalogByPid(0).then(res => {
            let nodes = []
            if (res.data.data) {
              nodes = treeToCascader(res.data.data);
            }
            this.searchData.catalogs = nodes;
          }).catch(err => {
            console.log(err)
          });
        }
      },
      //异步加载子分类数据
      loadCatalogData(item, callback) {
        item.loading = true;
        //异步加载子分类数据
        getCatalogByPid(item.value).then(res => {
          let nodes = []
          if (item.children) {
            nodes = treeToCascader(res.data.data);
            item.children = nodes;
            item.loading = false;
            callback();
          }
        }).catch(err => {
          console.log(err)
        });
      },
      //分类改变事件,因为在事件发生时，并没有绑定数据到searchData.catalogIDs属性上
      //只能自己获取，这跟其他的组件不一样，是bug吧
      onSearchCatalogChange(value, selectedData) {
        let cid = value[value.length - 1]
        this.search(cid)
      },
      //状态改变
      onSearchStatusChange(value) {
        this.search(this.searchData.catalogIDs[this.searchData.catalogIDs.length - 1])
      },
      //名称改变
      onSearchTitleChange(value) {
        this.search(this.searchData.catalogIDs[this.searchData.catalogIDs.length - 1])
      },
      //搜索调用方法? cid:
      search(cid) {
        let con = {}
        con.cid = cid
        con.title = this.searchData.title
        con.status = this.searchData.status
        con.index = this.pageData.index
        con.size = this.pageData.size
        //alert(JSON.stringify(con))
        getProductsByCondition(con).then(res => {
          if (res.data.status.code == 2000) {
            this.table.data = res.data.data.rows
            this.pageData.total = res.data.data.total
          }
        }).catch(err => {
          console.log(err)
        })
      },
      //页面改变事件
      onPageChange(index) {
        this.search(this.searchData.catalogIDs[this.searchData.catalogIDs.length - 1])
      }
    }
  }
</script>

<style scoped="scoped">
  .hide {
    display: none;
  }
</style>
